<?php
	$template['title']='景点资讯';
	include 'inc/header_inc.php';
?>

			<!-- 当前位置 -->
			<div class="loaction">
				<ol class="breadcrumb">
					<li><img src="img/location.gif" />当前位置:</li>.
					<li><a href="index.php"> 首页 </a> >> <a href="scenicInfo.php" class="active"> 景点资讯</a></li>
					<div class="search">
						<form action="" method="post">
							<input type="text" placeholder="请输入关键字查询" name="search" class="form-control" />
							<input type="submit" class="btn btn-primary" value="搜索" />
						</form>
					</div>
				</ol>
			</div>

			<div id="main">
				<!-- 分页 -->
				<div class="page2">
					<div class="title"><img src="img/index/content_title06.gif" alt="" /></div>
					<ul id="ul1"><p style="text-align:center; font-size:18px;" class="tip"><span>内容正在加载中...</span><img src="img/loading.gif" style="width:80px;" /></p></ul>
					<div id="div1"></div>
				</div>

				<!-- 手风琴 -->
				<div id="scenic">
					<ul>
					<p style="text-align:center; font-size:18px;" class="tip"><span>内容正在加载中...</span><img src="img/loading.gif" style="width:80px;" /></p>
					</ul>
				</div>

				<?php
					include 'inc/sidebar_inc.php';
				?>
			</div>
			
			<!-- 友情链接 -->
			<div class="friendly">
				<div class="silde">友<br/>情<br/>链<br/>接</div>
				<ul>
				<p style="text-align:center; font-size:18px;" class="tip"><span>内容正在加载中...</span><img src="img/loading.gif" style="width:80px;" /></p>
				</ul>
			</div>
		</div>

		<?php
			include 'inc/footer_inc.php';
		?>

	<script type="text/javascript">
			
		$(function(){
			//导航 
			nav();

			//分页
			var json2 = {
				title : []
			};
			$.ajax({
				url:"inc/infodata_inc.php?article=1",//跳转的地址
				data:"",//提交的数据
				type:"post",//提交的类型
				datatype:"json",//返回的数据类型
				async:true,
				success:function(data){
					if(data){
						var json=eval("("+data+")");//将返回的数据转化成json
						for(var i=0;i<json.length;i++){
							json2.title.push("<p></p> <div><a href='msg_article.php?msg=scenicinfo&id="+json[i].id+"'>"+json[i].title+"</a> <span>"+ json[i].time +"</span></div>");
						}
						$('.tip').remove();
						paging(json2);
						//信息列表
						infoList();
					}
				}
			});

			var scenic = document.getElementById('scenic').getElementsByTagName('ul')[0]; 
			$.ajax({
				url:"inc/infodata_inc.php?Accordion=1",//跳转的地址
				data:"",//提交的数据
				type:"post",//提交的类型
				datatype:"json",//返回的数据类型
				async:true,
				success:function(data){
					if(data){
						var json=eval("("+data+")");//将返回的数据转化成json
						console.log(json);
						for(var i=0;i<json.length;i++){
							if(i == 0){
								scenic.innerHTML += '<li class="active"><span class="bg'+ i +'">'+ json[i].title +'</span><img src="img/index/list_0'+ (i+1) +'.jpg" alt="'+ json[i].title +'" /><div>'+ json[i].content +'</div></li>';
							}else{
								scenic.innerHTML += '<li><span class="bg'+ i +'">'+ json[i].title +'</span><img src="img/index/list_0'+ (i+1) +'.jpg" alt="'+ json[i].title +'" /><div>'+ json[i].content +'</div></li>';
							}
						}
						$('.tip').remove();
						//手风琴
						createAccordion('scenic');
					}
				}
			});

		});
		
	

		//手风琴信息列表
		function createAccordion(id)
		{
			var oDiv=document.getElementById(id);
			var iMinWidth=9999999;

			var aLi=oDiv.getElementsByTagName('li');
			var aSpan=oDiv.getElementsByTagName('span');

			var i=0;

			oDiv.timer=null;

			for(i=0;i<aSpan.length;i++)
			{
				aSpan[i].index=i;
				aSpan[i].onmouseover=function ()
				{
					gotoImg(oDiv, this.index, iMinWidth);
				};

				iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
			}
		};

		function gotoImg(oDiv, iIndex, iMinWidth)
		{
			if(oDiv.timer)
			{
				clearInterval(oDiv.timer);
			}
			oDiv.timer=setInterval
			(
				function ()
				{
					changeWidthInner(oDiv, iIndex, iMinWidth);
				}, 20
			);
		}

		function changeWidthInner(oDiv, iIndex, iMinWidth)
		{
			var aLi=oDiv.getElementsByTagName('li');
			var aSpan=oDiv.getElementsByTagName('span');
			var iWidth=oDiv.offsetWidth;
			var w=0;
			var bEnd=true;
			var i=0;

			for(i=0;i<aLi.length;i++)
			{
				if(i==iIndex)
				{
					continue;
				}

				if(iMinWidth==aLi[i].offsetWidth)
				{
					iWidth-=iMinWidth;
					continue;
				}

				bEnd=false;

				speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);

				w=aLi[i].offsetWidth-speed;

				if(w<=iMinWidth)
				{
					w=iMinWidth;
				}

				aLi[i].style.width=w+'px';

				iWidth-=w;
			}

			aLi[iIndex].style.width=iWidth+'px';

			if(bEnd)
			{
				clearInterval(oDiv.timer);
				oDiv.timer=null;
			}
		}

	</script>